<template>
  <div class="wrapper" ref="cartsum">
    <div class="content">
      <div class="left">
        <!-- <input type="checkbox" class="checkbox" name="Allcheck"> -->
        <p>选择</p>
      </div>
      <div class="middle">
        <p>合计￥{{ totalPrice.toFixed(2) }}</p>
      </div>
      <div class="right"  @click="alertInfo1">
        <p>去结算({{ cartlist.length }})</p>
      </div>
    </div>
    <div class="cantnotshop" :class="{alertInfo:alertInfo}">嘻嘻嘻，该功能还未开发哈！</div>
  </div>
</template>
<script>
export default {
  name: "cartBill",
  data() {
    return {
      cartlist: this.$store.state.cartList,
      totalPricec: 0,
      alertInfo:true
    };
  },
  computed: {
    totalPrice() {
      let totalPrice = 0;
      for (let i = 0; i < this.cartlist.length; i++) {
        totalPrice += this.cartlist[i].lowPrice * this.cartlist[i].count;
      }
      return totalPrice;
    },
  },
  methods: {
      alertInfo1(){
          this.alertInfo = false
          setTimeout(()=>{
              this.alertInfo = true
          },1500)
      }
  },
  created() {},
};
</script>
<style scoped>
.wrapper {
  position: absolute;
  bottom: 45px;
  width: 100%;
}
.content {
  color: white;
  font-size: 16px;
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
  width: 100%;
  height: 44px;
  background-color: orange;
}
.content div {
  flex: 1;
}
.middle {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #ff8198;
}
.right {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: rgb(233, 69, 64);
}
.cantnotshop {
  position: fixed;
  z-index: 999;
  line-height: 35px;
  padding: 0 5px;
  color: rgb(233, 233, 233);
  background-color: rgba(0, 0, 0, .8);
  border-radius: 10px;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
}
.alertInfo{
    display:none;
}
</style>